<template>
  <div class="map-container">

    <!-- 头部模块 -->
    <div class="header">
      <h1><span style="font-weight: bold;">彩恒云数据化展板</span></h1>
      <p><span>Data visualization page design</span></p>
    </div>
    <div class="main">

      <!-- top5 -->
      <div class="top5">
        <div class="top5-title">
          <span style="font-size: 1.5rem;">品牌销售</span>
        </div>
        <div class="top5-content">
          <ul>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>广电</span>
<!--                <span>52万</span>-->
                <span>65%</span>
<!--                <span><img src="@/assets/images/dataview1/up.png" alt=""></span>-->
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>凌云</span>
<!--                <span>24万</span>-->
                <span>42%</span>
<!--                <span><img src="@/assets/images/dataview1/up.png" alt=""></span>-->
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>喜鹊到家</span>
<!--                <span>11万</span>-->
                <span>57%</span>
<!--                <span><img src="@/assets/images/dataview1/up.png" alt=""></span>-->
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>恒喜荟</span>
<!--                <span>5万</span>-->
                <span>67%</span>
<!--                <span><img src="@/assets/images/dataview1/up.png" alt=""></span>-->
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>京东家电</span>
<!--                <span>4万</span>-->
                <span>38%</span>
<!--                <span><img src="@/assets/images/dataview1/down.png" alt=""></span>-->
              </div>
            </li>
          </ul>
        </div>
        <div class="top5-title">
          <span style="font-size: 1.5rem;">满意度反馈</span>
        </div>
      </div>
      <!-- 销售总额 -->
      <div class="total">
        <div class="data1">
          <span>年销售</span>
          <p>1469360</p>
        </div>
        <div class="data2">
          <span>月销售</span>
          <p>186183</p>
        </div>
        <div class="data3">
          <span>周销售</span>
          <p>49562</p>
        </div>
        <div class="data4">
          <span>日销售</span>
          <p>7439</p>
        </div>
        <canvas class="rain"></canvas>
        <canvas class="dashed"></canvas>
        <div class="sphere">
          <div class="sphere-bg"></div>
          <div class="sum">
            <span>销售总额</span>
            <p>00</p>
          </div>
        </div>
        <div class="cicle3"></div>
        <div class="cicle4"></div>
        <div class="cicle5"></div>
        <div class="cicle6"></div>
        <div class="cicle7"></div>
        <div class="cicle8">
          <span>7%</span>
          <p>空间运营</p>
        </div>
        <div class="cicle9">
          <span>2%</span>
          <p>其他服务</p>
        </div>
        <div class="cicle10">
          <span>20%</span>
          <p>社区生活服务</p>
        </div>
        <div class="cicle11">
          <span>71%</span>
          <p>资产运营</p>
        </div>
      </div>
      <!-- 会销分析 -->
      <div class="analyse">
        <div class="analyse-title">
          <span style="font-size: 1.5rem;">会销情况分析</span>
        </div>
        <ul>
          <li>
            <img src="@/assets/images/dataview1/s1.png" alt="">
            <h5>会销目标</h5><br>
            <span>Marketing Target</span><br>
            <em>￥00</em>
          </li>
          <li>
            <img src="@/assets/images/dataview1/s3.png" alt="">
            <h5>会销目标</h5><br>
            <span>Marketing Target</span><br>
            <em>￥00</em>
          </li>
          <li>
            <img src="@/assets/images/dataview1/s2.png" alt="">
            <h5>会销目标</h5><br>
            <span>Marketing Target</span><br>
            <em>￥00</em>
          </li>
        </ul>
        <div class="execution">
          <div class="title">完成情况</div>
          <div class="cicle1"></div>
          <div class="cicle2"></div>
          <div class="waterChart1">
            <div class="chart-title">会销完成率</div>
            <div class="chart1">
              <Water></Water>
            </div>
          </div>
          <div class="waterChart2">
            <div class="chart-title">会销占比</div>
            <div class="chart2">
              <Water></Water>
            </div>
          </div>
        </div>
      </div>
      <!-- 鞋服配销售分析 -->
      <div class="sale">
        <ul>
          <li>
            <div class="showImg">
              <img src="@/assets/images/dataview1/shoe.png" alt="">
            </div>
            <div class="data" style="font-size: 1rem;">
              <span>社区零售</span>
              <span>95%</span>
            </div>
            <div class="shoeChart">
<!--              /'.shoeChart', 52563, '完成率', 65000, '#09c4ca'-->
              <Manyidu :ele="'shoeChart'" :val="52563" :con="'完成率'" :max="65000" :color="'#09c4ca'" />
            </div>

          </li>
          <li>
            <div class="showImg">
              <img src="@/assets/images/dataview1/clothes.png" alt="">
            </div>
            <div class="data">
              <span>家政服务</span>
              <span>96%</span>
            </div>
            <div class="clothesChart">
<!--              、、'.clothesChart', 32563, '完成率', 45000, '#09c4ca'-->
              <Manyidu :ele="'clothesChart'" :val="32563" :con="'完成率'" :max="45000" :color="'#09c4ca'" />
            </div>
          </li>
          <li>
            <div class="showImg">
              <img src="@/assets/images/dataview1/mz.png" alt="">
            </div>
            <div class="data">
              <span>美居服务</span>
              <span>95%</span>
            </div>
            <div class="mzChart">
<!--              '.mzChart', 12563, '完成率', 35000, '#09c4ca'-->
              <Manyidu :ele="'mzChart'" :val="12563" :con="'完成率'" :max="35000" :color="'#09c4ca'" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 折线图 -->
      <div class="lineChart">
        <div class="analyse-title">
          <span style="font-size: 1.5rem;">用户活跃度分析</span>
        </div>
        <Huoyuedu></Huoyuedu>
      </div>
    </div>

    <!-- 底部模块 -->
    <div class="bottom">
      <h5><span style="font-size: 1.5rem;">数据状况</span></h5>
      <p>Data Status</p>
    </div>
  </div>

</template>

<script>
  import { getDateViewMap,getDateViewMapCharts } from "@/api/module/charts";
  import echarts from 'echarts'
  import EmptyList from '@/components/Tool/index';

  const baseURL = process.env.VUE_APP_BASE_API;
  require('echarts/theme/macarons');
  export default {
    name: 'Map',
    components: {
      EmptyList,
      ProView:() => import('@/components/ElUi/Dialog/popview'),
      popBoxGroup:() => import('@/components/ElUi/Dialog/popBoxGroup'),
      PopOver: () => import('@/components/ElUi/Popover/index'),
      Clock: () => import('@/views/module/dataview/Echarts/clock'),
      Orders: () => import('@/views/module/dataview/Echarts/orders'),
      Users: () => import('@/views/module/dataview/Echarts/users'),
      DeviceData: () => import('@/views/module/dataview/Echarts/deviceData'),
      ChargerData: () => import('@/views/module/dataview/Echarts/chargerData'),
      Projects: () => import('@/views/module/dataview/Echarts/project'),
      JiaoFei: () => import('@/views/module/dataview/Echarts/jiaofei'),
      Duojing: () => import('@/views/module/dataview/Echarts/duojing'),
      Manyidu: () => import('@/views/module/dataview/Echarts/manyidu'),
      Huoyuedu: () => import('@/views/module/dataview/Echarts/huoyuedu'),
      Water: () => import('@/views/module/dataview/Echarts/water'),
    },
    data() {
      return {
        dateViewTitle:'',
        map:null,
        mapDistrictSearch:null,
        loading:false,
        chartDeviceCount:null,
        //  时间
        date:new Date(),
        queryParams:{
          companyId:null
        },
        company:{},
        mapData:{},
        // public 文件夹
        publicPath: process.env.BASE_URL,
        //右侧菜单
        actMemu: {
          layerViewer:false,
          // 工作量
          workBox:false,
          window1:false,
          popBoxGroup:true,
        },
        dataPop: {
          windows:[false,false,false,false,false,false],
          popBoxGroup:true,
        },
        popBoxGroup:[true,true,true,true,true,true,false],
        popBoxGroupWindow:[false],
        currentUserId:0,
        centerBtns:[
          {type:'estate',name:'服务面积',icon:'estate_point.png',url:'',count:0,path:'/user/company/list',},
          {type:'charger',name:'缴费率',icon:'charger_point.png',url:'/terminal/check',count:0,path:'/device/list'},
          {type:'device',name:'用户量',icon:'device_point.png',url:'',count:0,path:'/user/customer/list'},
          {type:'mer',name:'服务项目',icon:'mer_point.png',url:'',count:0,path:'/mer/list'},
        ],
        mapColors: {},
        companyLevel:'city',
        companyDistict:'',
        currentCompanyId:0,
        deviceSpots:[],
        chargerSpots:[],
        estateSpots:[],
        merSpots:[],
        deviceList:[],
        estateList:[],
        chargerList:[],
        merList:[],
        onLineChargerCount:0,
        offLineChargerCount:0,
        chargeringOrderCount:0,
        productOrderCount:0,
        todayChargerOrderCount:0,
        merCount:0,
        userTotalCount:0,
        todayLoginCount:0,
        todayCreateCount:0,
        today_egg_count:0,
        deviceGetRecord:{},
        charger_charts:[],
      }
    },
    computed:{},
    watch: {
      'actMemu.popBoxGroup':{
        handler(val) {
          let that = this;
          const length = this.popBoxGroup.length;//群组组件个数
          const setVisible = function (visible) {
            for (let index = 0; index < length; index++) {
              that.popBoxGroup[index] = visible;
            }
          };
          if (val) {
            setVisible(true);
          } else {
            setVisible(false)
          }
        }
      },
      popBoxGroup:{
        handler(val) {
          let tag = false;
          for (let item of val) {
            if (item) tag = true;
          }
          if (this.actMemu.popBoxGroup && !tag) this.actMemu.popBoxGroup = false
        }
      }
    },
    created() {
      console.log('this.$route.query',this.$route.query);
      this.initData();
      this.initDataCharts();
    },
    mounted() {
    },
    methods: {
      initData(){
        var that = this;
        getDateViewMap(this.queryParams).then(response => {
          //获取当前自己的企业
          that.mapData = response.data;
          that.dateViewTitle = "彩恒云数据展板";
          that.companyDistict = "日照市";
          that.deviceList = response.data.devices;
          that.estateList = response.data.estates;
          that.chargerList = response.data.chargers;
          that.merList = response.data.mers;

          that.onLineChargerCount = response.data.onLineChargerCount;
          that.offLineChargerCount = response.data.offLineChargerCount;
          that.chargeringOrderCount = response.data.chargeringOrderCount;
          that.productOrderCount = response.data.productOrderCount;
          that.todayChargerOrderCount = response.data.todayChargerOrderCount;
          that.merCount = response.data.merCount;

          that.centerBtns[0].count = "";//response.data.estateCount;//
          that.centerBtns[1].count = response.data.chargerCountTotal;
          that.centerBtns[2].count = response.data.devicesCount;
          that.centerBtns[3].count = 3;//that.merCount;
        });
      },
      initDataCharts(){
        var that = this;
        getDateViewMapCharts(this.queryParams).then(response => {
          //获取当前自己的企业
        });
      },
      handleTitle(type){
        this.switchMenu(type);
      },
      // 切换右侧菜单
      switchMenu(t_index){
        // console.log('that.t_index',t_index);
        var that = this;
        if(t_index === 0){
          that.getCustomerList();
        } else if(t_index === 1){
          that.getDeliveryList('0',0);
        } else if(t_index === 2){
          that.getDeviceListWindow();
        } else if(t_index === 3){
          // that.getDeviceListWindow();
        }  else if(t_index === 4){
          that.getWasteList();
        } else if(t_index === 5){
          this.potionActiveName = '0';
          this.deliveryQueryParams.type = '0';
          that.getPotionDeliveryList();
        } else if(t_index === 6){//显示总公司的数据
          // console.log('that.t_index  1111',t_index);
          that.queryParams.companyId = that.currentCompanyId;
          that.queryParamsDatList.companyId = that.currentCompanyId;
          that.queryParamsWasteList.companyId = that.currentCompanyId;
          that.deliveryQueryParams.companyId = that.currentCompanyId;
          this.initData();
        }
        for(var index in that.dataPop.windows){
          // console.log('index',index);
          // console.log('t_index',t_index);
          if(parseInt(index) === parseInt(t_index)){
            // console.log('index,t_index',index,t_index);
            if(that.dataPop.windows[index] === true){
              that.dataPop.windows[index] = false;
            }else {
              that.dataPop.windows[index] = true;
            }
          }else {
            that.dataPop.windows[index] = false;
          }
        }
        // console.log('this.dataPop',that.dataPop)
      },
    }
  }
</script>


<style lang='scss' scoped>
  @import '@/assets/styles/dataview1/css/style.scss';
  .map-container {
    position: relative;
    height:calc(100vh);
    width:100%;
    background-image: url('~@/assets/images/dataview1/53bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

</style>

